<template>
  <el-dialog
    title="商品预览"
    :visible.sync="localGoodsPreviewVisible"
    :width="width + 'px'"
    center
    @close="handleClose"
  >
    <iframe :src="goodsPreviewUrl" width="100%" height="667px" frameborder="0"></iframe>
  </el-dialog>
</template>

<script>
export default {
  props: {
    goodsPreviewVisible: {
      type: Boolean,
      default: false
    },
    goodsPreviewUrl: {
      type: String,
      default: 'https://sku.alipay168.cn/#/pages/goods/detail?item_id='
    },
    width: {
      type: Number,
      default: 375
    }
  },
  data() {
    return {
      localGoodsPreviewVisible: this.goodsPreviewVisible
    };
  },
  watch: {
    goodsPreviewVisible(newVal) {
      this.localGoodsPreviewVisible = newVal;
    },
  },
  methods: {
    handleClose() {
      this.$emit('update:goodsPreviewVisible', false);
    }
  }
}
</script>

<style scoped>
/* 现有的样式 */
</style>
